{// 模板继承 }
{extend name="$tableTplPath" /}

{block name="tree_top_content"}
<style>
    #content{display: none}
</style>
<blockquote class="layui-elem-quote" style="background: none;">
    {eq name="showTreeOpenOrCloseBtn" value="1"}
    <a href="javascript:;" class="  layui-btn-normal   layui-btn layui-btn-small open_tree_btn">
        <i class="fa fa-toggle-down"> </i> 全部展开
    </a>
    <a href="javascript:;" class="   layui-btn-normal  layui-btn layui-btn-small close_tree_btn">
        <i class="fa fa-toggle-up"> </i> 全部不展开
    </a>
    {/eq}

    {eq name="searchInput" value="1"}
    <div class="layui-input-inline">
        <label class="layui-form-label">搜索</label>
        <div class="layui-input-inline">
            <input type="text" name="selectStr" autocomplete="" value="" placeholder="" class="layui-input" id="JsSelectStr">
        </div>
    </div>
    {/eq}
</blockquote>
{/block}
{php}   if(!isset($searchInput)){ $searchInput=""; }   {/php}

{block name="tbody_content"}
{volist name='dataSource' id='vo'}

<tr tree_data_id="{$vo[$treePrimaryKey]}" tree_pid="{$vo[$treePidName]}"
    id="tree_data_id{$vo[$treePrimaryKey]}" class="tree_pid{$vo[$treePidName]}" tree_level="{$vo.cur_tree_level}"  >
    {notempty name='BatchBtn'}
    <td>
        <input type="checkbox" lay-skin="primary" value="{notempty name='BatchKey'} {{ item.{$BatchKey} }} {/notempty}">
    </td>
    {/notempty}

    {foreach $columnsConfig as $val}
    <td>
        {eq name="treeField" value="$val[0]" }

        <i class="layui-icon layui-xtree-icon-null"
           style="position: relative; top: 3px; margin: 0px 5px 0px {$vo.cur_tree_level*45}px; font-size: 18px; color: rgb(0, 0, 0);">
            <i class="fa  {notempty name="vo.cur_tree_has_son"} fa-toggle-down cur_tree_has_son {else /} fa-sticky-note-o {/notempty} " aria-hidden="true"
            data_id="{$vo[$treePrimaryKey]}"
            ></i>
        </i>
        <!--<i class="fa fa-etsy" aria-hidden="true"></i>-->
        {/eq}
        {if condition="($treeField == $val[0])"}
        <span class="treeField">
            {$vo[$val[0]]}
        </span>
        {else /}
        {$vo[$val[0]]}
        {/if}
    </td>
    {/foreach}
    {if condition=" $ConlumnsBtn "}
    <td>
        {$ConlumnsBtn}
    </td>
    {/if}

</tr>
{/volist}
{/block}





{block name="paging_init"}

$("#content .pj_btn").on('click', function () {
pj_btn_click($(this));
});



{/block}


{block name="treefoot"}
<script>
    layui.use(['form'], function() {
        var $ = layui.jquery;
        var form = layui.form();
        $("#content .cur_tree_has_son").on('click', function () {
            var id=$(this).parents("tr").attr("tree_data_id");
            if($(this).hasClass("fa-toggle-down")){
                close_tree(id);
            }
            else{
                open_tree(id,1);
            }
        });

        form.render('checkbox');
        form.on('checkbox(allselector)', function(data) {
            var elem = data.elem;

            $('#content').children('tr').each(function() {
                var $that = $(this);
                //全选或反选
                var $cbx = $that.children('td').eq(0).children('input[type=checkbox]')[0];
                if($cbx == undefined) {
                    return true;
                }
                $cbx.checked = elem.checked;
                form.render('checkbox');
            });
        });

        /**
         * 收起树
         * @param data_id
         */
        function close_tree(data_id){
            //旧版写法 性能比较差
//            $("#content #tree_data_id"+data_id).find(".cur_tree_has_son").removeClass("fa-toggle-down")
//                .addClass("fa-toggle-up");
//            $("#content .tree_pid"+data_id).each(function () {
//                close_tree($(this).attr("tree_data_id"));
//                $(this).hide();
//            });

            var open_tree_dom=$("#content #tree_data_id"+data_id);
            open_tree_dom.find(".cur_tree_has_son").removeClass("fa-toggle-down").addClass("fa-toggle-up");


            var tree_level=open_tree_dom.attr("tree_level");
            if(open_tree_dom.length<0){
                tree_level=0;
            }
            var next_dom=open_tree_dom;
            for(;;){
                next_dom=next_dom.next("tr");
                var cur_tree_level=next_dom.attr("tree_level");
                if(next_dom.length>0 && cur_tree_level>tree_level){
                    next_dom.hide();
                    next_dom.find(".cur_tree_has_son").removeClass("fa-toggle-down").addClass("fa-toggle-up");
                }
                else
                {
                    return true;
                }
            }

        }

        $("#content .tree_pid{$pid_origin_value}").each(function () {
            close_tree($(this).attr("tree_data_id")  );
        });
        if("{$treeOpen}"){ //只显示1层
            $("#content .tree_pid{$pid_origin_value}").each(function () {
                open_tree($(this).attr("tree_data_id") {gt name="treeOpenLevel" value="0"} , {$treeOpenLevel} {/gt}   );
                });
            }

            $("#content").show();

            /**
             * 展开树
             * @param data_id 展开的id
             * @param level 展开多少级数  默认表示展开无限级
             */
            function open_tree(data_id,level){
                //旧版写法  性能比较差
//            if(typeof (level) !== "undefined" && level<=0){ //undefined表示展开无限级
//                return true;
//            }
//            var open_tree_dom=$("#content #tree_data_id"+data_id);
//            open_tree_dom.find(".cur_tree_has_son").removeClass("fa-toggle-up").addClass("fa-toggle-down");
//            $("#content .tree_pid"+data_id).each(function () {
//                open_tree($(this).attr("tree_data_id"),(typeof (level) === "undefined" ?level : level-1) );
//                $(this).show();
//            });

                var open_tree_dom=$("#content #tree_data_id"+data_id);
                open_tree_dom.find(".cur_tree_has_son").removeClass("fa-toggle-up").addClass("fa-toggle-down");


                var tree_level=open_tree_dom.attr("tree_level");
                if(open_tree_dom.length<0){
                    tree_level=0;
                }
                var next_dom=open_tree_dom;
                for(;;){
                    next_dom=next_dom.next("tr");
                    var cur_tree_level=next_dom.attr("tree_level");

                    if(next_dom.length<=0 || cur_tree_level<=tree_level){
                        return true;
                    }
                    var dom_show=false;//dom节点是否展示
                    var tree_open=true;//树图标是否打开
                    //展开无限级
                    if(next_dom.length>0 && cur_tree_level>tree_level && typeof (level) === "undefined" ){ //undefined表示
                        dom_show=true;
                    }


                    //指定展开几级
                    if(next_dom.length>0 && cur_tree_level>tree_level && typeof (level) !== "undefined" && level>0 ){ //undefined表示展开无限级
                        if(parseInt(cur_tree_level) < parseInt(tree_level) + parseInt(level) ){
                            dom_show=true;
                        }
                        if(parseInt(cur_tree_level) == parseInt(tree_level) + parseInt(level) ){
                            tree_open=false;
                            dom_show=true;
                        }
                    }
                    if(dom_show){

                        next_dom.show();
                    }
                    else{

                        next_dom.hide();
                    }
                    if(tree_open){
                        next_dom.find(".cur_tree_has_son").removeClass("fa-toggle-up").addClass("fa-toggle-down");
                    }
                    else{
                        next_dom.find(".cur_tree_has_son").removeClass("fa-toggle-down").addClass("fa-toggle-up");
                    }
                }

            }

            $(".open_tree_btn").click(function () {
                var date1=new Date();  //开始时间

                $("#content .tree_pid{$pid_origin_value}").each(function () {
                    open_tree($(this).attr("tree_data_id"));
                });
                var date2=new Date();    //结束时间
                var date3=date2.getTime()-date1.getTime();  //时间差的毫秒数
//            console.log("执行时间"+date3);
            });

            $(".close_tree_btn").click(function () {
                var date1=new Date();  //开始时间
                $("#content .tree_pid{$pid_origin_value}").each(function () {
                    close_tree($(this).attr("tree_data_id")  );
                });
                var date2=new Date();    //结束时间
                var date3=date2.getTime()-date1.getTime();  //时间差的毫秒数
//            console.log("执行时间"+date3);
            });
            /*搜索js*/
            var searchInput =  "{$searchInput}";
            if(searchInput){
                var result = hideSubsets(true);
                //console.log(result);
                /*隐藏非父集的*/
                function hideSubsets(status){
                    var array = [];
                    //$("#content tr").hide();
                    if(status == false){
                        $("#content tr").hide();
                    }
                    $("#content tr").each(function(index,value){
                        var data = [];
                        var pid   = $(this).attr('tree_pid')
                        var id    = $(this).attr('tree_data_id');
                        var title = $(this).find(".treeField").html();
                        if(status == false){
                            $(this).find(".treeField").css('color','');
                            title = result[index]['title'];
                            if(pid==0){
                                $(this).css('display','');
                            }
                            $(this).find(".treeField").html(title);
                        }
                        data['title'] =  $.trim(title);
                        data['pid'] =  $.trim(pid);
                        data['id'] =  $.trim(id);
                        array[index] =  data;
                    });
                    if(status ==true){
                        return array;
                    }
                }
                /*搜索事件*/
                $("#JsSelectStr").keyup(function(){
                    //alert(1);
                    hideSubsets(false);
                    var search =  $(this).val();
                    /*搜索条件为空就就初始化*/
                    if(search == ''){
                        hideSubsets(false);
                        return true;
                    }
                    var newArray = new Array();
                    var searchStr =  new RegExp(search,'i');
                    var searchArray = new Array();
                    $("#content tr").each(function(index,value){
                        var title =  $(this).find(".treeField").text();
                        var id =  $(this).attr('tree_data_id');
                        var pid =  $(this).attr('tree_pid');
                        if(searchStr.test(title) == true){
                            if($.inArray(pid,newArray)==-1) {
                                newArray.push(pid);
                            }
                            $(this).find(".treeField").css('color','red');
                            searchArray.push(id);
                            $(this).css('display','');
                        }
                    });
                    if(searchArray.length == 0){
                        hideSubsets(false);
                        return true;
                    }
                    var ids = '';
                    for(var $i=0;$i<newArray.length;$i++){
                        if(getArray(newArray[$i])!=''){
                            if($i+1 == newArray.length){
                                ids +=getArray(newArray[$i]);
                            }else{
                                ids +=getArray(newArray[$i])+',';
                            }
                        }
                    }
                    openParent($.unique(ids.split(',')),newArray);
                })

            }

            function getArray(id){
                var array = ''
                $.each(result,function(index,value){
                    if(value.id == id  && value.pid!=0){
                        array += value.pid;
                        var ids =  getArray(value.pid);
                        if(ids!= '' ){
                            array +=','+ids;
                        }
                    }
                });
                return array;
            }

            function openParent(array,array2){
                $("#content tr").each(function(index,value){
                    var id =   $(this).attr('tree_data_id');
                    if($.inArray(id,array) !== -1 || $.inArray(id,array2) !== -1) {
                        $(this).css('display','');
                        console.log(
                            $(this).find(".treeField").prev().children('i').removeClass('cur_tree_has_son fa-toggle-up').addClass("cur_tree_has_son fa-toggle-down")
                        );
                    }
                });
            }
        });
</script>

{/block}

